/*
 * @Description:代码来源b站 ‘一直讲开发的老李’
 * @Autor: ZmSama
 * @Date: 2021-11-01 14:24:54
 */
let canvas = document.getElementById('canvas'),
  $ = canvas.getContext('2d'),
  w = (canvas.width = window.innerWidth),
  h = (canvas.height = window.innerHeight),
  t = 0,
  num = 450,
  u = 0,
  _u,
  s,
  a,
  b,
  x,
  y,
  _x,
  _y,
  _t = 1 / 100;

let anim = function () {
  $.globalCompositeOperation = 'source-over';
  $.fillStyle = 'hsla(0,0%,0%,0.75)';
  $.fillRect(0, 0, w, h);
  $.globalCompositeOperation = 'lighter';
  for (let i = 0; i < 2; i++) {
    x = 0;
    _u = u / 4 + i;
    $.beginPath();
    for (let j = 0; j < num; j++) {
      x -= 0.72 * Math.sin(4);
      y = (x * Math.sin(i + 3.0 * t + x / 20)) / 2;
      _x = x * Math.cos(b) - y * Math.sin(b);
      _y = x * Math.sin(b) + y * Math.cos(b);
      b = (j * 3 * Math.PI) / 6.8;
      $.lineWidth = 0.18;
      $.arc(w / 2 - _x, h / 2 - _y, 0.5, 0, 2 * Math.PI);
    }
    // 设置线性渐变
    let g = $.createLinearGradient(w / 2 + _x, h / 2 + _y, 0, w / 2 + _x, h / 2 + _y);
    g.addColorStop(0.0, `hsla(${u}, 85%, 85%, 1)`);
    g.addColorStop(1, `hsla( ${_u},0%, 5%, 1)`);
    $.strokeStyle = g;
    $.stroke();
  }
  t += _t;
  u -= 0.2;
  window.requestAnimationFrame(anim);
};
anim();
